<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>实时监控</title>
</head>
<style>
    .item {
        display: flex;
        border-bottom: 1px solid #000000;
        justify-content: space-between;
        width: 30%;
        line-height: 50px;
        height: 50px;
    }

</style>
<body>
<div id="app">
    <div v-for="item in list" class="item">
        <span>{{item.jobId}}</span>
        <span>{{item.batchNo}}</span>
    </div>
</div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            list: []
        }
    })

    var webSocket = null;
    if ('WebSocket' in window) {
        //创建WebSocket对象
        webSocket = new WebSocket("ws://localhost:8080/webSocket/monitor");

        //连接成功
        webSocket.onopen = function() {
            console.log("已连接");
            webSocket.send("消息发送测试")
        }

        //接收到消息
        webSocket.onmessage = function(msg) {
            //处理消息
            console.log(msg.data);
            vm.list = JSON.parse(msg.data);
        };

        //关闭事件
        webSocket.onclose = function() {
            console.log("websocket已关闭");
        };

        //发生了错误事件
        webSocket.onerror = function() {
            console.log("websocket发生了错误");
        }
    } else {
        alert("很遗憾，您的浏览器不支持WebSocket！")
    }

</script>
</html>